import React, { useState } from 'react';
import {NavLink,Outlet} from 'react-router-dom'
import {RouterItem} from '../../utills/type'
import {stagingRouters} from '../../router/routerConfig'
import { Sticky} from 'react-vant'
import './staging.css'
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  path:any,
  key?: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label:<NavLink to={path}>{label}</NavLink>
  } as MenuItem;
}

const routers=(arr:RouterItem[])=>{
    const newarr:MenuItem[]=[]
    arr && arr.forEach((item:RouterItem,index:number)=>{
      newarr.push(getItem(item.title,item.path,item.id,<PieChartOutlined/>))
    })
    return newarr
}




const staging: React.FC = () => {


 const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

const newstagingRouters=stagingRouters.slice(0,2)

  return (
    <div>
   
       <Layout style={{ minHeight: '100vh' }}>
         
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Sticky>
          <div className='hedimg'>
            <img src="https://s.ibaotu.com/next/img/new/btlogo2.9f48.png" alt="" />
          </div>
          </Sticky>
        <Menu mode='inline'
         defaultOpenKeys={['sub1']}
        defaultSelectedKeys={['5']}
        style={{height:'100%',borderRight:0,background:'#fff'}}
        items={routers(newstagingRouters)} >
          
        </Menu>

      </Sider>
   
      <Layout>
        <Sticky> 
         <Header style={{ padding: 0,}} > 
          <div className='heder'>
            <ul>
              <li>免费模版</li>
              <li>开通会员</li>
               <li>产品服务</li>
                <li>解决方案</li>
                 <li>API对接</li>
                  <li>资源与合作</li>
            </ul>
            <div className='heder_rt'>
              <img src="https://img0.baidu.com/it/u=1121791498,3395223981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="" />
            </div>
          </div>
         
         </Header>
     </Sticky>
        <Content style={{padding:'0',margin:'0',width:'100%',height:'100%'}}>
  
          <div
            style={{
             padding:'0',margin:'0',
             width:'100%',height:'100%'
            }}
          >
           <Outlet></Outlet>
          </div>
        </Content>
    
      </Layout>
    </Layout>
    </div>
  )
}

export default staging
